<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>商城商城团购产品列表</title>
	<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../../css/app.css" />
	<style type="text/css">
		body {
			background-color: #fff;
		}
		/*头部区域*/

		.btn-img-share {
			width: 1.3rem;
			padding-top: 0.5rem;
		}

		.aui-tab-item {
			color: #222222;
		}

		.active {
			color: #72D5EF !important;
			border-bottom: .15rem solid #72D5EF;
		}

		.aui-tab-item.active:after {
			content: '';
			position: absolute;
			width: 1.4rem;
			bottom: -1px;
			height: 2px;
			left: 50%;
			margin-left: -0.7rem;
			background-color: #72D5EF;
		}
		/*轮播*/

		.swiper-slide img {
			width: 100%;
			object-fit: cover;
		}

		.swiper-pagination {
			width: 2.05rem;
			height: 1.15rem;
			line-height: 1.15rem;
			text-align: center;
			background-color: rgba(0, 0, 0, 0.23);
			font-size: .5rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			right: 0.5rem;
			left: auto;
			border-radius: 1.2rem;
			bottom: 1.5rem;
		}
		/*活动信息条*/

		.goods-active-content {
			display: flex;
			padding: 0 0.5rem;
			justify-content: space-between;
			align-items: center;
			height: 2.5rem;
			font-size: 0.65rem;
			color: #FFFFFF;
		}
		/*进度条*/

		.aui-progress.sm,
		.aui-progress-sm,
		.aui-progress.sm .aui-progress-bar,
		.aui-progress-sm .aui-progress-bar {
			border-radius: 0.5rem;
		}

		.aui-progress-sm {
			background-color: #FFFFFF;
			/*margin: 0.2rem 0;*/
		}

		.aui-progress-bar {
			/*background-color: #FF3862;*/
			background: linear-gradient(135deg, rgba(227, 234, 86, 1) 0%, rgba(162, 225, 58, 1) 100%, rgba(122, 174, 229, 1) 100%);
		}
		/*商品信息*/

		.goods-tag {
			font-size: 0.75rem;
			color: #FFFFFF;
			border-radius: .15rem;
			padding: 0.1rem 0.2rem;
		}

		.goods-info-title:after {
			content: '';
			position: absolute;
			background-color: #690078;
			width: .1rem;
			left: 0;
			height: 0.7rem;
			margin-top: 0.1rem;
		}

		.group-join-list-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0.75rem 0;
		}

		.ping-star {
			display: inline-block;
			height: 0.9rem;
			margin-left: 0.3rem;
		}

		.aui-row-padded [class*=aui-col-xs-] {
			padding: 0.25rem;
		}

		.shop-comment {
			position: relative;
			font-size: 0.7rem;
			background-color: #F5F5F5;
			color: #999999;
			margin: 0.25rem;
			margin-top: 0.5rem;
			padding: 0.5rem;
			border-radius: 0.25rem;
		}

		.shop-comment:before {
			content: '';
			position: absolute;
			width: 0;
			height: 0;
			border-left: .45rem solid transparent;
			border-right: .45rem solid transparent;
			border-bottom: .7rem solid #F5F5F5;
			top: .65rem;
			left: .75rem;
		}
		/*底部*/

		.aui-bar-tab-item img {
			display: inline-block;
			width: 1.1rem;
		}

		.aui-bar-tab .aui-bar-tab-item {
			height: 2.4rem;
		}

		.aui-bar-tab .aui-bar-tab-label {
			display: block;
			font-size: 0.6rem;
			position: initial;
			line-height: 0.5;
		}

		.fade-enter-active,
		.fade-leave-active {
			/*transition: opacity 0.1s linear;*/
		}

		.fade-enter,
		.fade-leave-to
		/* .fade-leave-active below version 2.1.8 */

		{
			/*opacity: 0;*/
		}

		.attr-tag {
			width: 3rem;
			height: 1.4rem;
			line-height: 1.4rem;
			text-align: center;
			display: inline-block;
			padding: .25 .9rem;
			border-radius: .7rem;
			box-sizing: border-box;
			/*border: 1px solid #e6e6e6;*/
			color: #323233;
			background-color: #f6f6f6;
			font-size: 0.6rem;
			margin-right: 0.5rem;
			margin-bottom: 1rem;
		}

		.attr-tag .active {
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			color: #fff;
		}

		.aui-btn-plus {
			/*border: 1px solid #999999;*/
			/*border-radius: 50%;*/
			width: 1rem;
			height: 1rem;
			line-height: 1.2;
			color: #999999;
			font-size: 1rem;
		}

		.service_name_view:after {
			content: '/';
		}

		.service_name_view:last-child:after {
			content: '';
		}

		@font-face {
			font-family: 'iconfont';
			src: url('../../image/icon/addicon/iconfont.eot');
			src: url('../../image/icon/addicon/iconfont.eot?#iefix') format('embedded-opentype'), url('../../image/icon/addicon/iconfont.woff') format('woff'), url('../../image/icon/addicon/iconfont.ttf') format('truetype'), url('../../image/icon/addicon/iconfont.svg#iconfont') format('svg');
		}

		.iconfont {
			font-family: "iconfont" !important;
			font-size: 16px;
			font-style: normal;
			-webkit-font-smoothing: antialiased;
			-webkit-text-stroke-width: 0.2px;
			-moz-osx-font-smoothing: grayscale;
		}
		/*视频 图图片切换区域 tab*/

		.tab_video_img {
			display: flex;
		}

		.tab_video_img>div {
			width: 47px;
			height: 22px;
			text-align: center;
			background-color: #FFFFFF;
			border-radius: 11px;
			color: #333333;
			font-size: 11px;
		}

		.tab_video_img span {
			line-height: 22px;
		}

		.tab_video_img_active {
			background: -webkit-linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* Safari 5.1 - 6.0 */
			background: -o-linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* Opera 11.1 - 12.0 */
			background: -moz-linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* Firefox 3.6 - 15 */
			background: linear-gradient(#84E5FF, #6BB4FF, #7AAEE5);
			/* 标准的语法（必须放在最后） */
			color: #FFFFFF!important;
		}

		.tab_video_img>div:nth-of-type(1) {
			position: absolute;
			left: 136px;
			bottom: 88px;
			z-index: 1000;
		}

		.tab_video_img>div:nth-of-type(2) {
			position: absolute;
			left: 193px;
			bottom: 88px;
			z-index: 1000;
		}

		.fox {
			color: #fff !important;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
		}

		.list {
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			color: #fff;
		}
		/*底部改写*/

		.footer_icon_wraper img {
			width: 1.1rem;
		}

		.footer_icon_wraper>div {
			margin-right: 0.5rem;
			width: 2rem;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
		}

		.footer_icon_wraper>div span {
			font-size: 0.5rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}

		.add_car {
			width: 5rem;
			height: 2rem;
			background: linear-gradient(135deg, rgba(227, 234, 86, 1) 0%, rgba(162, 225, 58, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 1rem 0rem 0rem 1rem;
			font-size: 0.7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 2rem;
		}

		.immediately {
			width: 5rem;
			height: 2rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0rem 5rem 5rem 0rem;
			font-size: 0.7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: 2rem;
		}

		.listem {
			color: #fff !important;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%) !important;
		}

		.my-pur {
			flex: 1;
			display: inline-block;
			width: 4.8rem;
			height: 2rem;
			line-height: .8rem;
			text-align: center;
			color: #fff;
			border-radius: 1rem 0px 0px 1rem;
			font-weight: 500;
			font-size: .55rem;
			background: linear-gradient(135deg, rgba(227, 234, 86, 1) 0%, rgba(162, 225, 58, 1) 100%, rgba(122, 174, 229, 1) 100%);
			float: left;
			margin-top: .3rem;
			font-family: PingFangSC-Medium;
			display: flex;
			flex-direction: column;
		}

		.my-pur>span:nth-child(1) {
			flex: 1;
			font-size: .6rem;
			line-height: 1rem;
			position: relative;
		}

		.my-pur>span:nth-child(1) span {
			position: absolute;
			bottom: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.my-pur>span:nth-child(2) {
			flex: 1;
			font-size: .55rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: .8rem;
			position: relative;
		}

		.my-pur>span:nth-child(2) span {
			position: absolute;
			top: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.my-tuan {
			flex: 1;
			display: inline-block;
			width: 4.8rem;
			height: 2rem;
			line-height: .8rem;
			text-align: center;
			color: #fff;
			border-radius: 0 1rem 1rem 0;
			font-weight: 500;
			font-size: .55rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			float: left;
			margin-top: .3rem;
			font-family: PingFangSC-Medium;
			display: flex;
			flex-direction: column;
		}

		.my-tuan>span:nth-child(1) {
			flex: 1;
			line-height: 1rem;
			font-size: .6rem;
			position: relative;
		}

		.my-tuan>span:nth-child(1) span {
			position: absolute;
			bottom: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.my-tuan>span:nth-child(2) {
			flex: 1;
			font-size: .55rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			line-height: .8rem;
			position: relative;
		}

		.my-tuan>span:nth-child(2) span {
			position: absolute;
			top: -.1rem;
			left: 50%;
			transform: translateX(-50%);
		}

		.top-add {
			display: inline-block;
			width: 100%;
			height: 2.4rem;
			background-color: #fff;
		}

		.pic-video {
			display: inline-block;
			height: 18.75rem;
			width: 100%;
			background-color: #fff;
			overflow: hidden;
			position: relative;
			transform: translateY(1rem);
		}

		.pv-btn {
			width: 5rem;
			height: 1.1rem;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			bottom: .65rem;
			z-index: 99;
			display: flex;
			font-size: .55rem;
			text-align: center;
			color: #333333;
		}

		.pv-btn>div:nth-child(1) {
			flex: 1;
			margin-right: .5rem;
		}

		.pv-btn>div:nth-child(1)>span {
			display: inline-block;
			width: 2.35rem;
			height: 1.1rem;
			line-height: 1.1rem;
			border-radius: .55rem;
			background-color: #fff;
		}

		.pv-btn>div:nth-child(2)>span {
			display: inline-block;
			width: 2.35rem;
			height: 1.1rem;
			line-height: 1.1rem;
			border-radius: .55rem;
			background-color: #fff;
		}

		.head-good {
			flex: 1;
			/*background-color: yellow;*/
			display: inline-block;
			height: 100%;
			font-size: .8rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(34, 34, 34, 1);
		}

		.head-detail {
			flex: 1;
			/*background-color: orange;*/
			display: inline-block;
			height: 100%;
			font-size: .8rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(34, 34, 34, 1);
		}

		.aui-bar-nav {
			background-color: #fff !important;
			top: -2.5rem;
			padding: 0 .75rem;
			padding-top: 2.5rem;
			display: flex;
			text-align: center;
			color: #222222;
		}

		.goods_detail {
			flex: 6;
			font-size: .8rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(34, 34, 34, 1);
			display: flex;
		}

		.actived {
			color: #72D5EF;
			border-bottom: .1rem solid #72D5EF;
		}

		.info-set {
			width: 100%;
			height: 5rem;
			display: flex;
			flex-direction: column;
			line-height: 2.5rem;
			font-size: .65rem;
		}

		.info-set .info-size {
			flex: 1;
			background-color: #fff;
			color: #999999;
			padding: 0 .75rem;
		}

		.info-set .info-size>div {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			border-bottom: 1px solid #EEEEEE;
		}

		.info-set .info-size>div>span {
			color: #222222;
			margin-left: .6rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
		}

		.info-set .info-size>div>img {
			height: .65rem;
			display: inline-block;
			float: right;
			margin-top: 1rem;
		}

		.info-set .info-serve {
			flex: 1;
			background-color: #fff;
			color: #999999;
			padding: 0 .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
		}

		.info-set .info-serve>span {
			color: #222222;
			margin-left: .6rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
		}

		.info-set .info-serve>img {
			height: .65rem;
			display: inline-block;
			float: right;
			margin-top: 1rem;
		}

		.group-join-info {
			display: inline-block;
			width: 100%;
			/*margin:.55rem 0;*/
			/*background-color:green;*/
		}
		/*.group-join-info>div:nth-child(1) {
				display:inline-block;
				height:2.55rem;
				width:100%;
				display:flex;
				line-height:2.55rem;
			}*/

		.info_dir_taun {
			flex: 1;
			font-size: .7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(51, 51, 51, 1);
			text-align: left;
			padding-left: .75rem;
		}

		.info_dir_taun>img {
			display: inline-block;
			width: .15rem;
			height: .75rem;
			transform: translateY(.15rem);
		}

		.info_rule_tuan {
			flex: 1;
			font-size: .6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			text-align: right;
			padding-right: .75rem;
		}

		.info_rule_tuan>img {
			height: .65rem;
			display: inline-block;
			transform: translateY(.1rem);
		}

		.info_icons {
			display: inline-block;
			flex: 1;
		}

		.info_icons>span:nth-child(1),
		.info_icons>span:nth-child(2),
		.info_icons>span:nth-child(3) {
			display: inline-block;
			width: 1.1rem;
			height: 1.1rem;
			margin-top: .4rem;
			margin-right: 1.4rem;
			float: left;
			background-color: #fff;
		}

		.info_icon_names {
			display: inline-block;
			flex: 1;
		}

		.info_icon_names>span:nth-child(1) {
			display: inline-block;
			margin-top: .05rem;
			margin-left: .05rem;
			margin-right: 1.4rem;
			float: left;
			font-size: .5rem;
			font-weight: 400;
			color: #666666;
			font-family: PingFangSC-Regular;
		}

		.is_save {
			display: inline-block;
			margin-top: .05rem;
			margin-left: .1rem;
			margin-right: 1.3rem;
			float: left;
			font-size: .5rem;
			font-weight: 400;
			color: #666666;
			font-family: PingFangSC-Regular;
		}

		.saved {
			display: inline-block;
			margin-top: .05rem;
			margin-left: -.2rem;
			margin-right: 1.1rem;
			float: left;
			font-size: .5rem;
			font-weight: 400;
			color: #666666;
			font-family: PingFangSC-Regular;
		}

		.info_car {
			display: inline-block;
			margin-top: .05rem;
			float: left;
			font-size: .5rem;
			font-weight: 400;
			color: #666666;
			font-family: PingFangSC-Regular;
		}

		.info_icon1 {
			display: inline-block;
			flex: 1;
			height: 2.7rem;
			display: flex;
			flex-direction: column;
		}

		.info_icon2 {
			flex: 1.3;
			background-color: #fff;
			display: inline-block;
			height: 4rem;
			display: flex;
		}

		.tuan_type {
			display: flex;
			height: 2.7rem;
			background-color: #fff;
			padding: 0 .75rem;
		}

		.miaosha_type {
			border-top: 1px solid #EEEEEE;
			display: flex;
			height: 2.7rem;
			background-color: #fff;
			padding: 0 .75rem;
			align-items: center;
			justify-content: space-between;
		}

		.open_tuan {
			display: inline-block;
			width: 100%;
			height: 2.7rem;
			display: flex;
			margin-top: .1rem;
		}

		.join_goods {
			display: flex;
			margin-top: .35rem;
		}

		.join_goods_tuan {
			display: flex;
			margin-top: .0rem;
		}

		.join_goods>div:nth-child(1) {
			display: inline-block;
			width: 100%;
			height: 2.7rem;
			display: flex;
			margin-top: .3rem;
		}

		.join_goods>div:nth-child(2) {
			background: rgba(238, 238, 238, 1);
			font-size: .7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			width: 10rem;
			height: 2rem;
			line-height: 2rem;
			display: inline-block;
			border-radius: 1rem;
		}

		.join_goods>div:nth-child(1)>div:nth-child(1) {
			flex: 1;
			display: inline-block;
			width: 5rem;
			height: 2rem;
			border-radius: 1rem 0px 0px 1rem;
			background: linear-gradient(135deg, rgba(227, 234, 86, 1) 0%, rgba(162, 225, 58, 1) 100%, rgba(122, 174, 229, 1) 100%);
			font-size: .7rem;
			line-height: 2rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.join_goods>div:nth-child(1)>div:nth-child(2) {
			flex: 1;
			display: inline-block;
			float: left;
			width: 5rem;
			height: 2rem;
			line-height: 2rem;
			background: linear-gradient(135deg, rgba(132, 229, 255, 1) 0%, rgba(107, 180, 255, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0px 5rem 5rem 0px;
			font-size: .7rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.info-tuan {
			width: 100%;
			/*height:3.3rem;*/
			padding: 0 .75rem;
			display: inline-block;
			position: relative;
			/*background-color: green;*/
		}

		.info-tuan-head {
			display: inline-block;
			width: 2rem;
			float: left;
			margin-top: .75rem;
		}

		.info-tuan-head img {
			width: 1.8rem;
			border-radius: 50%;
		}

		.info-tuan-time {
			display: inline-block;
			width: 10.5rem;
			padding-left: .5rem;
			margin-top: .65rem;
		}

		.info-tuan-time>div:nth-child(1) {
			font-size: .65rem;
			font-family: PingFangSC-Semibold;
			font-weight: 600;
			color: rgba(51, 51, 51, 1);
		}

		.info-tuan-time>div:nth-child(2) {
			font-size: .6rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.info-tuan-go {
			display: inline-block;
			width: 3.5rem;
			height: 1.5rem;
			float: right;
			background: linear-gradient(135deg, rgba(135, 241, 250, 1) 0%, rgba(74, 160, 249, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: .8rem;
			font-size: .7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			line-height: 1.5rem;
			text-align: center;
			margin: .9rem 0;
		}

		.info-all {
			display: inline-block;
			width: 100%;
			height: 2.55rem;
			line-height: 2.55rem !important;
			text-align: center;
			font-size: .7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.rule-tuan {
			height: 2.75rem;
			line-height: 2.75rem;
			text-align: center;
			font-size: .8rem;
			font-family: PingFangSC-Medium;
			font-weight: 500;
			color: rgba(50, 50, 51, 1);
			border-bottom: 1px solid rgba(237, 237, 240, 1);
		}

		.rule-tuan>img {
			position: absolute;
			height: 1.1rem;
			right: 0.8rem;
			top: .85rem;
		}
		/*改写 */

		.pintuan_detai_item {
			height: 3.3rem;
			border-bottom: 1px solid rgba(238, 238, 238, 0.5);
			display: flex;
			justify-content: space-between;
			padding: 0.75rem 0;
		}

		.btn_pintuan {
			width: 3.5rem;
			height: 1.5rem;
			background: linear-gradient(135deg, rgba(135, 241, 250, 1) 0%, rgba(74, 160, 249, 1) 100%, rgba(122, 174, 229, 1) 100%);
			border-radius: 0.78rem;
			font-size: 0.7rem;
			font-family: PingFangSC;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			text-align: center;
			line-height: 1.5rem;
			align-self: center;
		}

		.btn_all {
			height: 2.5rem;
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 0.5rem solid #F6F6F6;
			box-sizing: content-box;
		}

		.btn_all>span {
			display: inline-block;
			margin-right: 0.45rem;
			font-size: 0.7rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}

		.pintuan_detai_item {
			margin: 0 0.75rem;
		}

		.pintuan_detai_item img {
			width: 1.8rem;
			height: 1.8rem;
			border-radius: 50%;
			margin-right: 0.5rem;
		}
		.tuan_img{
			width: 1.25rem;
			float: left;
			margin-left: -0.5rem;
			height: 1.25rem;
		}
		.tuan_button{
			width: 3.2rem;
			height: 1.22rem;
			background: linear-gradient(270deg,rgba(0,130,213,1) 0%,rgba(0,90,147,1) 100%);
			border-radius: 6rem;
			text-align: center;
			font-size: 0.7rem;
			color: rgba(255,255,255,1);
			padding-top: 0.1rem;
			margin-top: 1rem;
			border: 0.01rem solid rgba(0,90,147,1);
		}
		.user_name{
			width: 2.5rem;
	    float: left;
	    text-overflow: ellipsis;
	    white-space: nowrap;
	    overflow: hidden;
			padding-top: 0.2rem;
			color: rgba(46,46,46,1);
			margin-left: 0.5rem;
			font-size: 0.7rem;
		}
		.see{
			font-size: 0.6rem;
			font-family: PingFangSC-Regular, "PingFang SC";
			font-weight: 400;
			color: rgb(89, 89, 89);
			border: 0.01rem solid rgba(89,89,89,1);
			display: inline;
			padding: 0.5rem;
			margin-top: 0.2rem;
			border-radius: 0.3rem;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<!-- <div class="pintuan_detail">
			<div class="pintuan_detai_item" v-for="(vo,index) in info">
				<div class="" style="display:flex;">
					<img :src="vo.leader_avatar" alt="">
					<div class="">
						<div class="" style="font-size:0.65rem;font-family:PingFangSC-Semibold;color:rgba(51,51,51,1);line-height:0.9rem;">
							{{vo.leader_nickname}}<span style="font-family:PingFangSC-Regular;font-size:0.6rem;margin-bottom:0.1rem;">(发起)</span>
						</div>
						<div>
							<span style="font-weight:400;font-size:0.6rem;font-family:PingFangSC-Regular;color:#999999">还差</span>
							<span style="font-weight:400;font-size:0.6rem;font-family:PingFangSC-Regular;color:#DD3D27">{{vo.un_join_tuan_num}}</span>
							<span style="font-weight:400;font-size:0.6rem;font-family:PingFangSC-Regular;color:#999999">人成团</span>
							<span style="font-weight:400;font-size:0.6rem;font-family:PingFangSC-Regular;color:#999999">|</span>
							<span style="font-weight:400;font-size:0.6rem;font-family:PingFangSC-Regular;color:#999999" v-if="settime(vo.end_time,now_time)!='已结束'">剩余</span>
							<span style="font-weight:400;font-size:0.6rem;font-family:PingFangSC-Regular;color:#999999" v-html="settime(vo.end_time,now_time)"></span>
						</div>
					</div>
				</div>

				<div class="btn_pintuan" v-if="vo.status==1&&vo.take_in==0" @click="openWin_pintuan_details(vo.id)">
					去参团
				</div>

				<div class="btn_pintuan" v-if="vo.take_in==1" @click="openWin_pintuan_details(vo.id)" style="background:rgba(238,238,238,1);">
					已参团
				</div>

				<div class="btn_pintuan" v-if="vo.status==0&&vo.take_in==0" @click="openWin_pintuan_details(vo.id)" style="background:rgba(238,238,238,1);">
					已结束
				</div>

			</div>
		</div> -->

		<div class="" style="width:100%;height:3.6rem;" v-for="(vo,index) in info">
			<div class="tuan_left" style="width: 35%;float: left;padding-left: 0.5rem;padding-top: 0.5rem;" >
				<div class="" style="width: 100%;height: 50%;float: left;">
					 <img class=""  :src="vo.leader_avatar" style="width:1.25rem;height:1.25rem;float:left;border-radius:10rem;" alt="">
					 <div class="user_name">
							 <span>{{vo.leader_nickname}}</span>
					 </div>
				</div>
				<div class="" style="width: 100%;height: 50%;float: left;margin-top: 0.6rem;color:rgba(128,128,128,1);">
					 还差&nbsp<span style="color:rgba(0,90,147,1);">{{vo.un_join_tuan_num}}人</span>&nbsp成团
				</div>
			</div>

			<div class="tuan_center" style="width:45%;float: left;padding-top: 0.5rem;">
				<div class="" style="width: 100%;float: left;height:50%;margin-bottom:0.4rem">
					 <img  :src="vo.leader_avatar"  style="width:1.25rem;height:1.25rem;float: left;border-radius:10rem;">
					 <div class="" >
						 <img class="tuan_img" src="../../image/btn/user_tuan_img.png" alt="" style="width: 1.25rem;height: 1.25rem;float: left;border-radius:10rem;">
						 <!-- <img class="tuan_img" src="../../image/btn/user_tuan_img.png" alt="">
						 <img class="tuan_img" src="../../image/btn/user_tuan_img.png" alt=""> -->
					 </div>
				</div>
				<div class="" style="width: 100%;height:50%;float: left;color:rgba(128,128,128,1);margin-top: 0.2rem;">
						<span v-if="settime(vo.end_time,now_time)!='已结束'">剩余</span>
						<span v-html="settime(vo.end_time,now_time)"></span>
				</div>
			</div>

			<div class="tuan_right" style="width: 20%;float: left;" v-if="vo.status==1&&vo.take_in==0" @click="openWin_pintuan_details(vo.id)">
					 <div class="tuan_button" style="" >
							 去参团
					 </div>
			</div>

			<div class="tuan_right" v-if="vo.take_in==1" style="width: 20%;float:left;"  @click="openWin_pintuan_details(vo.id)">
					 <div class="tuan_button" style="background:rgba(227,244,255,1);color:rgba(0,90,147,1);border:0.02 solid rgba(0,90,147,1);" >
							 已参团
					 </div>
			</div>

			<div class="tuan_right" style="width: 20%;float: left;" v-if="vo.status==0&&vo.take_in==0" @click="openWin_pintuan_details(vo.id)">
					 <div class="tuan_button" style="" >
							 已结束
					 </div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
	var vm = new Vue({
		el: '#app',
		data: {
			tuan_id: 0,
			good_id: 0,
			page: 1,
			loadmore: true,
			info: [],
			now_time: Date.parse(new Date()) / 1000
		},
		methods: {
			get_list: function() {
				get_data('api/Tuan/tuanUidList', {
					token: $api.getStorage('token'),
					tuan_id: vm.tuan_id,
					good_id: vm.good_id,
					page: vm.page
				}, function(ret) {
					// alert(JSON.stringify(ret))
					if (ret.status) {
						if (ret.data.length < 20) {
							vm.loadmore = false
						}
						ret.data.forEach(function(el) {
							vm.info.push(el)
						})
					}
				})
			},
			settime: function(time, nowtime) {
				var data = TimeCountDowns(time, nowtime);
				if (data != '0') {
					return data.hours + ':' + data.minutes + ':' + data.seconds;
				} else {
					return '已结束';
				}
			}
		},

	})
	apiready = function() {
		vm.tuan_id = $api.getStorage('tuan_id')
		vm.good_id = $api.getStorage('good_id')
		vm.get_list()
		$api.rmStorage('tuan_id')
		$api.rmStorage('good_id')
			fnInitPullRefresh(function() {
				vm.page = 1;
				vm.loadmore = true
				vm.info = [];
				vm.get_list()
			})

		// 新版刷新
		refresh_new(function() {
			setTimeout(function() {
				vm.page = 1;
				vm.loadmore = true
				vm.info = [];
				vm.get_list()
				api.refreshHeaderLoadDone()
			}, 1000)
		})
		fnInitScrollToBottom(function() {
			vm.page++;
			vm.get_list()
		})
		setInterval(function() {
			vm.now_time = Date.parse(new Date()) / 1000
		}, 200)
	};
</script>

</html>
